import React, { Component } from 'react';
import moment from 'moment';
import Link from 'umi/link';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import StandardTable from '@/components/StandardTable';
import TextOverFlow from '../../TextOverFlow';

@connect(({ problempage, loading }) => ({
  loading: loading.models.problempage,
  problempage,
}))
class ProblemProTable extends Component {
  constructor(props) {
    super(props);
    const { onRef } = this.props;
    onRef?.(this);
  }

  // 列表查询
  searchList = async (proFormFieldsValue = {}, currentPage = 1, pageSize = 10) => {
    const { dispatch } = this.props;
    if (proFormFieldsValue) {
      await dispatch({
        type: 'problempage/updateModalData',
        payload: {
          proFormFieldsValue,
        },
      });
    }
    await dispatch({
      type: 'problempage/getProList',
      payload: {
        ...proFormFieldsValue,
        pageArg: {
          currentPage,
          pageSize,
        },
      },
    });
  };

  handleStandardTableChange = pagination => {
    const {
      problempage: { proFormFieldsValue },
    } = this.props;
    this.searchList(proFormFieldsValue, pagination.current, pagination.pageSize);
  };

  render() {
    const {
      proUrl,
      problempage: { proPageData },
      loading,
      busiType,
    } = this.props;
    const columns = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 170,
          },
        }),
        render: text => text || '--',
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '问题对象',
        dataIndex: 'probObjName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '问题类型',
        dataIndex: 'probTypeName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '所属客服',
        dataIndex: 'blngCsName',
        render: text => text || '--',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '提出时间',
        dataIndex: 'creTime',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => moment(text).format('YYYY-MM-DD HH:mm'),
      },
      {
        title: '操作',
        dataIndex: 'n11',
        onHeaderCell: () => ({ style: { width: 80, fontWeight: 'bold' } }),
        render: (text, record) => (
          <div>
            <Link to={`${proUrl}?probDetId=${record.probDetId}&busiType=${busiType}`}>查看</Link>
          </div>
        ),
      },
    ];

    return (
      <div>
        {/* <StandardTable {...this.props} columns={columns} /> */}
        <StandardTable
          {...this.props}
          loading={loading}
          data={proPageData}
          columns={columns}
          rowKey="probDetId"
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
  }
}

export default ProblemProTable;

ProblemProTable.defaultProps = {
  problempage: null,
};

ProblemProTable.propTypes = {
  problempage: PropTypes.object,
  proUrl: PropTypes.string.isRequired,
  busiType: PropTypes.string.isRequired,
  onRef: PropTypes.func.isRequired,
};
